/* components/swi/switch.wxss */
.switch {
  position: relative;
  transition: all 0.2s ease-in-out;
  display: inline-block;
  padding: 4rpx;
  background: rgb(214, 214, 214);

  >.scroll {
    position: relative;
    display: flex;
    // justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    color: #fff;

    >.switch-circle {
      position: absolute;
      left: 0;
      transform: translateX(0);
      transition: all 0.2s ease-in-out;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      border: 4rpx solid #fff;
      border-radius: 50%;
      background: #fff;
      
      >.ban {
        width: 4rpx;
        height: 100%;
        transform: rotate(-45deg);
        background: #fff;
      }
    }

    >.text {
      position: absolute;
      padding: 0 8rpx;
      white-space: nowrap;

      &.text1 {
        left: 0;
        padding-right: 4rpx;
      }
      &.text2 {
        right: 0;
        padding-left: 4rpx;
      }

      &.hide {
        box-sizing: border-box;
        opacity: 0;
      }
    }

  }

  &.switch-checked {
    background: rgb(62, 148, 229);

    >.scroll >.switch-circle {
      left: 100%;
      transform: translateX(-100%);
    }
  }

  &.switch-disabled {
    // background: gray !important;

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      background: rgba(255, 255, 255, 0.3);
      // background-color: #4ceb93;
    }

    .switch-circle {
      border-color: #f56c6c;

      >.ban {
        background: #f56c6c;
      }
    }
  }
}